<template>
    <div class="app-container">
        <mobile-message-page v-if="$store.state.mobile.userAgent==='mobile'" 
        :titleDetalles="titleDetalles" :editor="editor" 
        :timeDetalles="timeDetalles" :contentDetalles="contentDetalles">
        </mobile-message-page>
         <div class="designer" style="height: 100%" v-else>
             <div>
                <div class="detailContent"> 
                    <span class="title">消息详情</span>
                    <el-button size="small" type="primary" @click="returnTable">返回</el-button>
                </div>
                <div>
                    <div class="titleMessage">
                        {{titleDetalles}}
                    </div>
                    <div class="content">
                        <span>发布人：{{editor}}</span>
                        <span>发布时间：{{timeDetalles}}</span>
                    </div>
                </div>
                 <el-divider></el-divider>
                 <div>
                    <wangEditor v-model="contentDetalles" :height="300" :readonly="true"  ref="editorForm" />
                    <!-- <span v-html="contentDetalles"></span> -->
                 </div>
                 <div v-if="fileDocList.length > 0" class="showFileDoc">
                    <div class="titleTextCss">附件：</div>
                    <div class="lineFilecss" v-for="(item, idx) in fileDocList" :key="idx">
                        <i class="el-icon-document"></i>
                        <span class="fileTextCss" :title="item.name" @click="viewFile(item)">{{item.name}}</span>
                        <span><i class="el-icon-download fileIcon" @click="downloadFileFunc(item)"></i></span>
                    </div>
                </div>
             </div>
         </div>
    </div>
</template>

<script>
import { readMyMessage, getDetailMyMessage } from '@/api/custom/message'
import WangEditor from '@/components/wangEdito/index.vue'
import mobileMessagePage from '@/views/custom/mobiledesign/mobileComponents/mobileMessagePage.vue'
// 下载插件
import { download } from '@/utils/index'
  export default {
    name: 'myMessage',
    data() {
        return {
            contentDetalles: '',
            titleDetalles: '',
            timeDetalles: '',
            editor: '',
            fileDocList: []
         };
    },
    watch: {
        '$route.query': function() {
            const id = this.$route.query?.id
            const announcementId = [id]
            readMyMessage(announcementId).then((res) => {}) //标记已读
            getDetailMyMessage(id).then((res) => {
                if(res.code === 0){
                    this.contentDetalles = res.data.content
                    this.titleDetalles = res.data.title
                    this.timeDetalles = this.getDateTime(res.data.sendTime)
                    this.editor = res.data.username
                    this.fileDocList = JSON.parse(res.data.allFileList) || []
                }
            })
        }
    },
    created() {
        const id = this.$route.query?.id
        const announcementId = [id]
        readMyMessage(announcementId).then((res) => {}) //标记已读
        getDetailMyMessage(id).then((res) => {
            if(res.code === 0){
                this.contentDetalles = res.data.content
                this.titleDetalles = res.data.title
                this.timeDetalles = this.getDateTime(res.data.sendTime)
                this.editor = res.data.username
                this.fileDocList = JSON.parse(res.data.allFileList) || []
            }
        })
    },
    mounted() {
    },
    methods: {
        viewFile (item) {
            const nameSplitList = item.name.split('.')
            const type = nameSplitList[nameSplitList.length - 1]
            if (['jpeg', 'jpg', 'png'].includes(type)) {
                window.open(item.url, '_blank')
            } else if (['docx', 'doc', 'xlsx', 'xls'].includes(type)) {
                let newFileUrl = encodeURIComponent(item.url)
                newFileUrl = 'http://view.xdocin.com/xdoc?_xdoc=' + newFileUrl
                window.open(newFileUrl, '_blank')
            } else if (type === 'pdf') {
            } else {
                this.$message.warning('当前文件不支持预览')
            }
        },
        downloadFileFunc (item) {
            download(item.url, item.name)
        },
        returnTable() {
            this.$router.go(-1)
            // this.$router.push( "/custom/message/myMessage");
        },
         //时间戳转日期时间
        getDateTime(time) {
            if (!time) return ''
            let date = new Date(time)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
        },
    },
    components:{
        mobileMessagePage,
        WangEditor
    }
  }
</script>
<style lang="scss" scoped>
.titleTextCss{
    font-size: 16px;
    margin-bottom: 5px;
}
.lineFilecss{
    padding: 3px 0;
}
.showFileDoc{
    padding: 10px 0;
}
.fileTextCss{
    cursor: pointer;
    width: 300px;
    padding: 0 10px;
    display: inline-block;
    vertical-align: text-bottom;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    &:hover {
        color: #409EFF;
    }
}
.fileIcon{
    padding: 0 5px;
    cursor: pointer;
    &:hover {
        color: #409EFF;
    }
}
.detailContent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}
.title{
    font-size: 16px;
}
.titleMessage{
    font-size: 18px;
    margin-bottom: 10px;
}
.content{
    color: rgb(138, 144, 156);
    span:nth-child(1){
        margin-right: 30px;
    }
}
</style>